<div>
    <button class="export" data-format="png">
        Export to PNG
    </button>
    <button class="export" data-format="pdf">
        Export to PDF
    </button>
</div>
<div id="chart" style="width: 800px; height: 600px">
</div>
<div style="display: none;">
    @Html.BeginForm("_Export", "Home", FormMethod.Post, new { id = "exportForm" }) {
        <input type="hidden" id="exportString" name="svg" />
        <input type="hidden" id="exportFormat" name="format" />
    }
</div>
<script>
    function createChart() {
        $("#chart").kendoChart({
            theme: $(document).data("kendoSkin") || "default",
            title: {
                text: "Internet Users"
            },
            legend: {
                position: "bottom"
            },
            chartArea: {
                background: ""
            },
            seriesDefaults: {
                type: "bar"
            },
            series: [{
                name: "World",
                data: [15.7, 16.7, 20, 23.5, 26.6]
            }, {
                name: "United States",
                data: [67.96, 68.93, 75, 74, 78]
            }],
            valueAxis: {
                labels: {
                    format: "{0}%"
                }
            },
            categoryAxis: {
                categories: [2005, 2006, 2007, 2008, 2009]
            },
            tooltip: {
                visible: true,
                format: "{0}%"
            }
        });
    }

    $(document).ready(function () {
        createChart();
        $(".export").click(function () {
            var chart = $("#chart").data("kendoChart");
            var svgString = escape(chart.svg());
            var exportFormat = $(this).data("format");

            $("#exportString").val(svgString);
            $("#exportFormat").val(exportFormat);
            $("#exportForm").submit();
        });
    });
</script>
